<template>
    <div class="tech-loader-container">
      <div class="tech-loader">
        <div 
          v-for="(circle, index) in circles" 
          :key="index" 
          class="tech-circle" 
          :style="circle.style"
        ></div>
        
        <div class="tech-dots">
          <div 
            v-for="(dot, index) in dots" 
            :key="'dot-' + index" 
            class="tech-dot" 
            :style="dot.style"
          ></div>
        </div>
        
        <div class="loading-text">{{ text }}</div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  
  const props = defineProps({
    size: {
      type: Number,
      default: 200
    },
    color: {
      type: String,
      default: '#00f7ff'
    },
    text: {
      type: String,
      default: '加载中...'
    },
    dotCount: {
      type: Number,
      default: 4
    }
  });
  
  const circles = computed(() => [
    { style: { 
      width: '100%', 
      height: '100%',
      animationDelay: '0s'
    }},
    { style: { 
      width: '80%', 
      height: '80%',
      top: '10%',
      left: '10%',
      animationDelay: '-1s'
    }},
    { style: { 
      width: '60%', 
      height: '60%',
      top: '20%',
      left: '20%',
      animationDelay: '-2s'
    }}
  ]);
  
  const dots = computed(() => {
    const positions = [];
    const angleStep = (2 * Math.PI) / props.dotCount;
    
    for (let i = 0; i < props.dotCount; i++) {
      const angle = i * angleStep;
      const radius = props.size / 2 - 10;
      const x = 50 + Math.cos(angle) * radius / (props.size / 2) * 40;
      const y = 50 + Math.sin(angle) * radius / (props.size / 2) * 40;
      
      positions.push({
        style: {
          top: `${y}%`,
          left: `${x}%`,
          backgroundColor: props.color,
          boxShadow: `0 0 10px ${props.color}`
        }
      });
    }
    
    return positions;
  });
  </script>
  
  <style scoped>
  .tech-loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #02004d;
  }
  
  .tech-loader {
    position: relative;
    width: v-bind('props.size + "px"');
    height: v-bind('props.size + "px"');
  }
  
  .tech-circle {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 10px v-bind('props.color'), 
                inset 0 0 10px v-bind('props.color');
    animation: rotate 4s linear infinite;
  }
  
  .tech-circle::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: v-bind('props.color');
    border-radius: 50%;
    box-shadow: 0 0 20px v-bind('props.color'), 
                0 0 30px v-bind('props.color');
  }
  
  .tech-circle:nth-child(1) {
    animation-delay: 0s;
  }
  
  .tech-circle:nth-child(2) {
    animation-delay: -1s;
  }
  
  .tech-circle:nth-child(3) {
    animation-delay: -2s;
  }
  
  .tech-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  
  .tech-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 2s ease-in-out infinite;
  }
  
  .loading-text {
    position: absolute;
    bottom: -40px;
    width: 100%;
    text-align: center;
    color: v-bind('props.color');
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-shadow: 0 0 5px v-bind('props.color');
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes pulse {
    0%, 100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: 0.5;
    }
  }
  </style>